<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-jQuery和JS入口函数的区别</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        // JS和jQuery的第一个区别：
        /*
        * 原生JS和jQuery入口函数的加载模式不同
        * 原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
        * jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
        */

        /*
        // 原生JS：
        window.onload = function(ev) {
            // 1、通过原生的JS入口函数可以拿到DOM元素
            var img = document.getElementsByTagName("img")[0];
            console.log(img);
            // 2、通过原生的JS入口函数可以拿到DOM元素的宽高
            var width = window.getComputedStyle(img).width;
            console.log("onload", width);
        }

        // jQuery：
        $(document).ready(function(){
            // 1、通过jQuery的入口函数可以拿到DOM元素
            var $img = $("img")[0];
            console.log($img);

            // 
            var $width = $img.width();
            console.log("ready", $width);
        }) 
        */

        /*
        1、原生的JS如果编写了多个入口函数，后面编写的会覆盖前面编写的
        2、jQuery中编写多个入口函数，后面的不会覆盖前面的
        */
        // window.onload = function (ev) {
        //     alert("hello no1");
        // }

        // window.onload = function (ev) {
        //     alert("hello no2");
        // }

        $(document).ready(function(){
            alert("hello no1");
        });

        $(document).ready(function(){
            alert("hello no2");
        });

    </script>
</head>
<body>
    <img src="https://img10.360buyimg.com/img/jfs/t1/179086/40/4900/81664/60a47d6bE2bf6455e/208f5820c156d4ab.gif"
    alt="">
</body>
</html>